<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vizuly - Weighted Tree</title>

    <!-- We use google fonts for many of the examples, but they are not necessary -->
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto|Raleway:600,400,200' rel='stylesheet' type='text/css'>

    <!-- Test container style sheets -->
    <link rel="stylesheet" href="/static/weight/styles/examples.css">

    <!-- Vizuly specific style sheets -->
    <link rel="stylesheet" href="/static/weight/lib/styles/vizuly.css">
    <link rel="stylesheet" href="/static/weight/lib/styles/vizuly_weightedtree.css">

    <!-- Supporting test container files:  Vizuly does NOT rely on these -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="/static/weight/lib/styles/cssmenu.css">
    <script type="text/javascript" src="/static/weight/lib/jquery-2.1.1.min.js"></script>
    <script src="/static/weight/lib/cssmenu.js"></script>

    <!-- D3.js ... of course! -->
    <script src="/static/weight/lib/d3.min.js"></script>

    <!-- debug source scripts: start --> <!--
    <script src="../src/namespace/namespace.js"></script>
    <script src="../src/viz/_viz.js"></script>

    <script src="../src/theme/_theme.js"></script>


    <script src="../src/core/component.js"></script>
    <script src="../src/core/data.js"></script>
    <script src="../src/core/util.js"></script>
    <script src="../src/core/color.js"></script>
    <script src="../src/core/format.js"></script>
    <script src="../src/svg/_svg.js"></script>
    <script src="../src/svg/gradient.js"></script>
    <script src="../src/svg/filter.js"></script>
    <script src="../src/viz/weightedtree.js"></script>
    <script src="../src/theme/weightedtree.js"></script>

    --> <!-- debug source scripts: end -->

    <!-- store.js -->

    <script src="/static/weight/changebase.js"></script>

  <script>
    $(document).ready(function () {
    if (self == top) {
      (function (i, s, o, g, r, a, m) {
         i['GoogleAnalyticsObject'] = r;
         i[r] = i[r] || function () {
         (i[r].q = i[r].q || []).push(arguments)
         }, i[r].l = 1 * new Date();
         a = s.createElement(o),
            m = s.getElementsByTagName(o)[0];
         a.async = 1;
         a.src = g;
        m.parentNode.insertBefore(a, m)
      })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
       ga('create', 'UA-73241722-1', 'auto');
       ga('send', 'pageview');
      }
    });
  </script>

</head>

<body>

<div id='cssmenu'>
    <ul class="main-menu">
        <li class='active'>
            <a><span>Display</span><br><span class="setting"></span></a>
            <ul class="options" callback="changeSize">
                <li id="currentDisplay" class="selected"><a></a></li>
                <li item_value="1000,1000"><a>1000px - 1000px</a></li>
                <li item_value="800,600"><a>800px - 600px</a></li>
                <li item_value="375,667"><a>375px - 667px</a></li>
                <li item_value="320,568"><a>320px - 568px</a></li>
            </ul>
        </li>
        <li class='active'><a><span>Theme </span><br><span class="setting"></span></a>
            <ul class="options" callback="changeSkin">
                <li item_value="None"><a>None</a></li>
                <li item_value="Axiis" class="selected"><a>Axiis</a></li>
            </ul>
        </li>
        <li class='active'><a><span class="label">Data </span><br><span class="setting"></span></a>
          <ul class="options" callback="changeData">
                <li item_value="0" class="selected"><a>Federal</a></li>
                <li item_value="1"><a>State</a></li>
                <li item_value="2"><a>Local</a></li>
            </ul>
        </li>
    </ul>
</div>

<!-- Our main content container-->
<div class="container" style="width:100%">
    <div id="viz_container" class="z-depth-3">
    </div>
    <div style="margin-left:0px; height:0px; width:90%; margin:0px auto; margin-top:20px; font-family:Raleway; font-size:14px;">
        When politicians talk about “spending” have you ever wanted to know where your tax dollars actually go? This visualization shows you how congress allocates expenditures across three government levels (Federal, State, and Local.) The thicker the line, the more that is being spent.
    </div>
</div>




<script>
    //Once the document is ready we set javascript and page settings
    var screenWidth;
    var screenHeight;

    $(document).ready(function () {

        var rect;
        if (self==top) {
            rect = document.body.getBoundingClientRect();
        }
        else {
            rect =  parent.document.body.getBoundingClientRect();
        }

        //Set display size based on window size.
        screenWidth = (rect.width < 960) ? Math.round(rect.width*.95) : Math.round((rect.width - 210) *.95);

        screenHeight=750;

        d3.select("#currentDisplay")
                .attr("item_value", (String(screenWidth) + "," + String(screenHeight)))
                .attr("class", "selected")
                .html("<a>" + screenWidth + "px - " + screenHeight + "px</a>");


        $("#cssmenu").menumaker({
            title: "VIZULY WEIGHTED TREE",
            format: "multitoggle"
        });

        // Set the size of our container element.
        viz_container = d3.selectAll("#viz_container")
                .style("width", screenWidth + "px")
                .style("height", screenHeight + "px");


        loadData();


    });

</script>


</body>


</html>
